<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org"><head>
<head>
    <link href="../static/css/bootstrap.css" th:href="@{/static/css/bootstrap.css}" rel="stylesheet"/>
    <link href="../static/css/bootstrap-table.css" th:href="@{/static/css/bootstrap-table.css}" rel="stylesheet"/>
    <link href="../static/css/toastr.min.css" th:href="@{/static/css/toastr.min.css}" rel="stylesheet"/> <!--toast-top-right 修改边距-->
    <link href="../static/css/style.css" th:href="@{/static/css/style.css}" rel="stylesheet"/> <!--toast-top-right 修改边距-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <script src="../static/js/jquery.min.js" th:src="@{/static/js/jquery.min.js}"></script>
    <script src="../static/js/bootstrap.js" th:src="@{/static/js/bootstrap.js}"></script>
    <script src="../static/js/bootstrap-table.js" th:src="@{/static/js/bootstrap-table.js}"></script>
    <script src="../static/js/bootstrap-table-zh-CN.js" th:src="@{/static/js/bootstrap-table-zh-CN.js}"></script>
    <script src="../static/js/jqPaginator.js" th:src="@{/static/js/jqPaginator.js}"></script>
    <script src="../static/js/common.js" th:src="@{/static/js/common.js}"></script>
    <script src="../static/js/toastr.min.js" th:src="@{/static/js/toastr.min.js}"></script>
    <script src="../static/js/confirm.js" th:src="@{/static/js/confirm.js}"></script>
<body>
<div class="container">

    <!--搜索区域-->
    <div class="panel panel-primary">
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-3">
                    <div class="input-group">
                      <span class="input-group-btn">
                   <button class="btn btn-default" type="button">登录帐号</button>
                         </span>
                        <input type="text" class="form-control" autocomplete="off" id="searchAccount" placeholder="请输入登录帐号">
                    </div>
                </div>

                <div class="col-lg-2">
                    <span class="input-group-btn"  >
                         <button class="btn btn-success add-btn"  id="search_btn"  style="border-radius: 4px;">
                             <span  class="glyphicon glyphicon-search"></span>搜索</button>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!--表格区域-->
    <div class="panel panel-primary">
        <div class="panel-body">
            <table id="table" >
            </table>
        </div>
    </div>

</div>

<!--详情模态框-->
<div id="details" th:include="/admin/loginLog/details :: details"></div>

<script th:inline="javascript">

    $("#table").bootstrapTable('destroy');
    $(document).ready(function () {
        $("#table").bootstrapTable({
            url:"/admin/loginLog/list",   //请求地址
            striped : true, //是否显示行间隔色
            pageNumber : 1, //初始化加载第一页
            pagination : true,//是否分页
            sidePagination : 'server',//server:服务器端分页|client：前端分页
            pageSize : 5,//单页记录数
            pageList : [ 5, 10, 20],//可选择单页记录数
            showRefresh : true,//刷新按钮
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            toolbar:'#toolbar',//工具栏
            // 传递参数查询参数
            responseHandler: function(res) {
                return {
                    "total": res.total,//总页数
                    "rows": res.data   //数据
                };
            },
            queryParams : function(params) {//上传服务器的参数
                return {
                    page: params.offset / params.limit + 1,// SQL语句起始索引
                    size: params.limit,  // 每页显示数量
                    loginAccount:$('#searchAccount').val()
                };
            },
            columns : [ {
                title : '用户id',
                field : 'id',
                visible: false
            }, {
                field: '',
                title: '序号',
                align: 'center',
                formatter: function (value, row, index) {
                    const page = $('#table').bootstrapTable("getOptions"); //id为table的id
                    return page.pageSize * (page.pageNumber - 1) + index + 1;
                }
            },{
                title : '登录帐号',
                field : 'loginAccount',
                align: 'center',
            },{
                title : 'ip',
                field : 'ip',
                align: 'center',
            },{
                title : '浏览器',
                field : 'browser',
                align: 'center',
            },{
                title : '位置',
                field : 'loginPlace',
                align: 'center',
            },{
                title : '系统',
                field : 'operatingSystem',
                align: 'center',
            },{
                title : '状态',
                field : 'status',
                align: 'center',
                formatter : function (value, row, index) {
                    if (row.status === 1) {
                        return '正常';
                    } else if (row.status === 2) {
                        return '失败';
                    }
                }
            },{
                title : '信息',
                field : 'info',
                align: 'center',
            },{
                title : '登录时间',
                field : 'loginTime',
                sortable : true,
                align: 'center',
            },{
                field:'ID',
                title: '操作',
                width: 200,
                align: 'center',
                formatter: actionFormatter
            }, ]
        })
    });

    //操作栏的格式化
    function actionFormatter(value, row, index) {
        let result = "";
        result += "  <a href='javascript:;' class='btn btn-warning  btn-xs' onclick=\"EditViewById('" + row.id + "')\" title='详情'>详情</a>";
        result += "  <a href='javascript:;' class='btn btn-danger btn-xs' onclick=\"DeleteByIds('" + row.id + "')\" title='删除'>删除</a>";
        return result;
    }

    //查询按钮事件
    $('#search_btn').click(function(){
        $('#table').bootstrapTable('refresh', {url:"/admin/loginLog/list"});
    })

    //删除按钮事件
    function DeleteByIds(id) {
        //取表格的选中行数据
        Ewin.confirm({ message: "确认要删除选择的数据吗？" }).on(function (e) {
            if (!e) {
                return;
            }
            const data = {
                id: id
            };
            //请求后端删除数据
            myrequest("/admin/loginLog/delete",data,'GET',function(data){
                toastr.success(data.msg);
                $("#table").bootstrapTable('refresh');
            }, function(data){
                toastr.error(data.msg);
            })
        });
    }
</script>
</body>
</html>